﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>全屏布局</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<style type="text/css">
	html,body,.parent{margin:0;height:100%;overflow:hidden;}
	body{color: white;} 
	.parent{display: flex;flex-direction: column;}
	.top{height:100px;background: blue;}
	.bottom{height:50px;background: black;}
	.middle{flex:1;display:flex;}
	.left{width:200px;background: red;}
	.right{flex: 1;overflow: auto;background:pink;}
	.right .inner{min-height: 1000px;}
	
	/*.parent{display: flex;flex-direction: column;}
	.top{height:10%;background: blue;}
	.bottom{height:5%;background: black;}
	.middle{flex:1;display:flex;}
	.left{width:20%;background: red;}
	.right{flex: 1;overflow: auto;background:pink;}
	.right .inner{min-height: 1000px;}*/

</style>
</head>
<body>
	<div class="parent">
		<div class="top">top</div>
		<div class="middle">
			<div class="left">left</div>
			<div class="right">
				<div class="inner">right</div>
			</div>
		</div>
		<div class="bottom">bottom</div>
	</div>
</body>
</html>